// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 配置vuex的步骤
// 1. 运行 npm i vuex -S
// 2. 导入包
import vuex from "vuex"
// 3. 注册 vuex 到Vue里
Vue.use(vuex)
// 4.  new Vuex.Store() 实例，得到一个 数据仓储对象
var store = new vuex.Store({
  state:{
    //  大家可以把 state 想象成 组件 中的 data  存储数据的
    //   如果在组件中 想要访问，store 中数据  只能通过 this.$store.state.*** 来访问
    count:0
  },
  mutations:{
    // 注意： 如果要操作 store 中的  state 值 ，只通过 调用  mutations 提供的方法, 才能操作对应的数据，不推荐直接操作
    //  state 中 的数据  ，因为 万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有 操作数据的方法
    increment(state){
      state.count ++ 
    },
    // 注意: 如果 组件想要调用 mutations 中的方法 ， 只能使用 this.$store.commit('方法名')
    // 这种调用 mutations 方法的格式 this.$emit('父组件中的方法名')
    del(state,obj){
      // 注意: mutations 的函数 参数列表中，最多支持两个参数，其中，参数1 是 state状态； 参数2：通过 commit 提交过去来的参数
      state.count -= (obj.c + obj.d)
    },
   
  },
  getters:{
    // 注意: 这里的  getters 只负责对外提供数据 ， 不负责 修改数据，如果想要修改  state  中的数据， 请去找 mutations
    optCount:function(state){
      return '当前最新的count值是:' + state.count 
    }
    // 经过咱们回顾对比，发现 getters 中的方法，和组件的过滤器和 getters 都没有修改原数据，都是把原数据做了一层包装，提供给了调用者
    //  其次，getters也和 computed 比较像， 只要state 中的数据发生变化了  那么，如果 getters 正好也引用了这个数据， 那么就会立即触发 getters 的   重新求值
  }
})
// 总结：
// 1. state的数据，不能直接修改，如果想要修改，必须通过  mutations
// 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$rtore.state.**
// 3. 如果组件 想要修改数据， 必须使用 mutations 提供的方法 需要通过 this.$store.commit('方法的名称'，唯一的一个参数)
// 4. 如果 store 中的 state 上的数据  在对外提供的时候，需要做一层包装，那么，推荐使用 getters ， 如果需要使用 getters ，则用this.$store.getters.***


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store:store // 5.将vuex 创建的store 挂载到 VM 实例上   // 只要挂载 到 VM 上 任何组件都能使用store 来存取数据  
})
